<!--  -->
<template>
  <div>
    <dd>
      <div class="seq">
        <i>{{index}}</i>
      </div>
      <div class="middle">
        <h6>
         
          <a class="fz14"   @click="gotodetail(dditem.id)" v-html="dditem.篇名"></a>
        </h6>
        <div class="authorinfo">
          <p>
            <a target="_blank">{{ dditem.作者 }}</a
            ><span
              ><a target="_blank">{{ dditem.机构 }}</a></span
            >
          </p>
        </div>

        <p class="baseinfo">
          <span class="journal">
           <a>{{ dditem.中文刊名 }}</a> 
          </span>
          <span>
            <a target="_blank">
              {{ dditem.年 }}年{{ dditem.期 }}期
            </a>
          </span>

          <span class="date">{{ dditem.出版日期 }}</span>

        
        </p>
        <div class="abstract">
          <span>摘要：</span>
          <div v-html="dditem.中文摘要"></div>
        </div>
        <p class="keywords">
          <span>关键词：</span>
          <a class="KnowledgeNetLink" target="knet">{{ dditem.中文关键词 }}</a>
        </p>

        <!-- <i class="down" @click="down(scope.row)"></i>
             <i class="read" @click="read(scope.row)"></i> -->
        <div class="button-area t-CLF">
          <div class="button-list">
            <div>
              <div class="t-DIB">
                <div class="wf-list-button" @click=" read(dditem)"> 
                  <svg
                    t="1664256717723"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2367"
                    width="16"
                    height="16"
                    class="icon"
                  >
                    <path
                      d="M1002.359 205.444c0 0-54.533-45.314-110.271-69.166-60.648-29.07-146.357-27.734-146.357-27.734s-60.398-4.458-122.298 24.726c-61.9 29.185-107.596 68.832-107.596 68.832s-63.147-48.251-118.957-73.509-136.334-20.049-136.334-20.049-76.634 3.894-125.942 26.055-94.596 74.854-94.596 74.854l0 679.631c0 0 69.706-60.245 111.272-77.185 41.565-16.941 106.593-16.373 106.593-16.373s77.884 9.335 124.303 28.067c46.421 18.734 133.661 88.212 133.661 88.212s55.612-59.26 100.245-81.529c75.685-39.093 150.71-33.413 150.71-33.413s46.104 2.005 110.261 26.063c58.329 21.873 126.482 67.495 126.482 67.495l-1.175-684.978zM492.111 836.959c0 0-119.348-94.35-234.238-92.221-108.264 2.005-149.699 29.404-177.767 57.471 1.003-33.079-0.505-568.06-0.505-568.06s41.604-74.816 181.947-80.831c119.291-10.024 222.21 74.178 228.558 90.217 3.008 21.051 2.005 593.424 2.005 593.424zM958.25 814.907c-28.068-28.067-103.252-70.168-211.516-72.173-114.891-2.128-205.341 95.229-205.341 95.229s-1.003-572.374 2.005-593.424c10.025-16.038 88.216-96.231 228.558-90.217 121.639 5.295 187.865 78.972 187.865 78.972s-1.457 548.806-1.571 581.613z"
                      p-id="2368"
                      fill="#1b5db1"
                    ></path></svg
                  ><span>在线阅读</span>
                </div>
              </div>
              <div class="t-DIB">
                <div class="wf-list-button" @click="down(dditem)">
                  <svg
                    t="1664256798166"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3064"
                    width="16"
                    height="16"
                    class="icon"
                  >
                    <path
                      d="M913.2 875H138c-24.6 0-44.6-20-44.6-44.6V684.1c0-24.6 20-44.6 44.6-44.6 16.6 0 30 13.4 30 30 0 11-5.9 20.5-14.6 25.8V815h744.4V695.3c-8.8-5.2-14.6-14.8-14.6-25.8 0-16.6 13.4-30 30-30 24.6 0 44.6 20 44.6 44.6v146.3c0 24.6-20 44.6-44.6 44.6z"
                      fill="#1b5db1"
                      p-id="3065"
                    ></path>
                    <path
                      d="M526.6 694.3c-7.5 0-14.9-2.2-21.2-6.6L503 686 286.3 459.6c-6.4-6.1-10.1-14.7-10-23.7 0.1-11.4 6.2-22.7 15.9-29.4l7.7-5.4h37.8c16.6 0 30 13.4 30 30 0 7.4-2.7 14.2-7.1 19.4l165.9 173.4 155.7-162.7H573.7V188.3H480v272.8h-39.5c-16.6 0-30-13.4-30-30 0-8.6 3.6-16.4 9.5-21.9V163.6c0-19.8 16.6-35.3 37.7-35.3H596c21.2 0 37.7 15.5 37.7 35.3v237.5h120.8l7.8 5.5c9.3 6.5 14.8 17.2 14.9 28.7 0 9.3-3.8 18.2-10.4 24.4L550.2 686l-2.3 1.6c-6.3 4.5-13.8 6.7-21.3 6.7z"
                      fill="#1b5db1"
                      p-id="3066"
                    ></path></svg
                  ><span>下载</span>
                </div>
              </div>

            </div>
          </div>
       
        </div>
      </div>
    </dd>
     <onlinereades ref="onlinereadref"/>
  </div>
</template>

<script>
import onlinereades  from '@/views/common/onlinereades.vue'
export default {
  name: "",
  components: {onlinereades},
  props: ["dditem", "index"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    gotodetail(item){
       this.$router.push({path:'/detail',query:{id:item}})
    },
     down(row) {

      window.location.href ="http://localhost:8990/ng/es/download?filename="+ row.文件名+"&year="+row.年+"&qi="+row.期
      +"&zjdm="+row.专辑代码 +"&gph="+row.光盘号 +"&pykm="+row.拼音刊名 +"&title="+row.篇名
  },
   read(row){
     this.$refs.onlinereadref.onlinereadProgress(row)
  }
  },
};
</script>
<style lang='css' scoped>
.result-detail-list dd {
  position: relative;
  min-height: 110px;
  padding-top: 17px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e9e9e9;
  border-top-color: #f5f1f2;
}
.result-detail-list .seq {
  float: left;
  padding-top: 3px;
  padding-left: 20px;
  text-align: center;
  color: #343434;
  font-size: 14px;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
}
.result-detail-list .seq i {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  font-style: normal;
}
.result-detail-list .middle {
  padding-left: 10px;
  padding-right: 125px;
  overflow: hidden;
  font-family: Arial, "Microsoft yehei", serif;
}

.result-detail-list h6 {
  margin-bottom: 12px;
  font-weight: normal;
  font-size: 16px;
  color: #000;
  line-height: 26px;
  letter-spacing: 0.5px;
}
.result-detail-list .authorinfo {
  margin-bottom: 7px;
  line-height: 24px;
  font-size: 12px;
  color: #000;
  font-family: Arial, "Microsoft yehei", serif;
}
.result-detail-list .baseinfo {
  line-height: 24px;
  font-size: 12px;
  color: #000;
  font-family: Arial, "Microsoft yehei", serif;
}
.result-detail-list .baseinfo span {
  padding-right: 15px;
  word-wrap: break-word;
  word-break: break-all;
}

.result-detail-list .abstract {
  margin-top: 9px;
  line-height: 18px;
  font-size: 12px;
  color: #555;
  letter-spacing: 0.8px;
  font-family: Arial, "Microsoft yehei";
  word-break: break-all;
  text-justify: inter-word;
  text-align: justify;
}

.result-detail-list .abstract span {
  margin-right: 5px;
  font-weight: bold;
  color: #1f1f1f;
}
.result-detail-list .authorinfo p span {
  margin-left: 20px;
}
.result-detail-list h6 a {
  color: #000;
}
a {
  text-decoration: none;
  color: #666;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}
.result-detail-list .keywords {
  margin-top: 7px;
  line-height: 28px;
  font-size: 12px;
  color: #000;
}
.result-detail-list .keywords span {
  margin-right: 5px;
  font-weight: bold;
}

a:focus,
a:hover {
  text-decoration: none;
}

.result-detail-list h6 a:hover {
  color: #53a2e3;
}

.down {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../../assets/img/kns8-icon-sprite.png);
  background-repeat: no-repeat;
  background-position: 0px -140px;
  float: left;
  cursor: pointer;
}
.read {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../../assets/img/kns8-icon-sprite.png);
  background-repeat: no-repeat;
  background-position: -20px -140px;
  float: left;
  cursor: pointer;
}
.button-area {
   
    margin-top: 10px;
}
.wf-list-button:hover {
    background: #417dc9;
    color: #fff;
}

.wf-list-button {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 7px;
    margin-right: 15px;
    border: 1px solid #417dc9;
    border-radius: 3px;
    background: #fff;
    color: #1b5db1;
    cursor: pointer;
    line-height: 25px;
}

.button-list {
    float: left;
}
.t-DIB {
    display: inline-block;
}

.icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
</style>